<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时间表盘</title>
    <style>
      /* 全局样式设置 */
      body {
        margin: 0;
        padding: 0;
        overflow: hidden; /* 防止页面出现滚动条 */
        background-color: transparent; /* 背景透明 */
      }

      /* 时间表盘容器样式 */
      .time-clock-container {
        width: 100%;
        box-sizing: border-box; /* 盒模型计算方式 */

        background-color: #fafafa; /* 设置背景颜色为浅灰色 */
        border-radius: 8px; /* 设置边框圆角为8像素 */
        padding: 15px; /* 设置内边距为15像素 */
        font-family: Arial, Helvetica, sans-serif; /* 设置字体族 */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        border: 1px solid black; /* 设置边框为1像素实线，黑色 */
      }

      /* 时钟显示样式 */
      .clock {
        font-size: 1.8rem; /* 设置字体大小为1.8倍根字体大小 */
        text-align: center; /* 文本居中对齐 */
        margin-bottom: 10px; /* 设置下边距为10像素 */
        letter-spacing: 1px; /* 设置字符间距为1像素 */
        color: #333; /* 设置文字颜色为深灰色 */
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出内容 */
      }

      .date {
        text-align: center; /* 文本居中对齐 */
        font-size: 1rem; /* 设置字体大小为1倍根字体大小 */
        opacity: 0.8; /* 设置不透明度为0.8 */
        margin-bottom: 15px; /* 设置下边距为15像素 */
        color: #666; /* 设置文字颜色为中等灰色 */
        white-space: nowrap; /* 防止文本换行 */
      }

      .weather {
        display: flex; /* 使用弹性布局 */
        align-items: center; /* 垂直居中对齐 */
        justify-content: space-around; /* 平均分配空间 */
      }

      .temp {
        font-size: 1.5rem; /* 设置字体大小为1.5倍根字体大小 */
        font-weight: bold; /* 设置字体加粗 */
        color: #e53935; /* 设置文字颜色为红色 */
      }

      .weather-info {
        text-align: right; /* 文本右对齐 */
      }

      .city {
        font-size: 1rem; /* 设置字体大小为1倍根字体大小 */
        margin-bottom: 5px; /* 设置下边距为5像素 */
        color: #1e88e5; /* 设置文字颜色为蓝色 */
      }

      .condition {
        font-size: 0.8rem; /* 设置字体大小为0.8倍根字体大小 */
        opacity: 0.8; /* 设置不透明度为0.8 */
        color: #43a047; /* 设置文字颜色为绿色 */
      }
    </style>
  </head>
  <body>
    <div class="time-clock-container">
      <!-- 时钟显示区域 -->
      <div class="clock" id="clock">00:00:00</div>
      <!-- 日期显示区域 -->
      <div class="date" id="date">2022年1月1日</div>
      <!-- 天气信息显示区域 -->
      <div class="weather">
        <!-- 温度显示 -->
        <div class="temp" id="temp">24°C</div>
        <!-- 详细天气信息 -->
        <div class="weather-info">
          <!-- 城市名称 -->
          <div class="city" id="city">哈尔滨</div>
          <!-- 天气状况 -->
          <div class="condition" id="condition">晴</div>
        </div>
      </div>
    </div>
    <script>
      // 更新时钟函数
      function updateClock() {
        const now = new Date(); // 获取当前时间
        // 格式化时、分、秒，确保两位数显示
// 将当前时间的小时部分转换为两位数的字符串格式
        const hours = String(now.getHours()).padStart(2, "0");
        // 将当前时间的分钟数转换为两位数字符串，如果是个位数则在前面补0
        const minutes = String(now.getMinutes()).padStart(2, "0");
        // 将当前时间的秒数转换为两位数的字符串格式
        // 如果秒数是一位数，在前面补0
        const seconds = String(now.getSeconds()).padStart(2, "0");
        // 更新时钟显示
        document.getElementById(
          "clock"
        ).textContent = `${hours}:${minutes}:${seconds}`;

        // 星期数组
        const weekdays = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        // 获取年、月、日
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const weekday = weekdays[now.getDay()];
        // 更新日期显示
        document.getElementById(
          "date"
        ).textContent = `${year}年${month}月${day}日 ${weekday}`;
      }

      // 获取天气数据函数
      function fetchWeather() {
        // 天气状况数组
        const conditions = [
          "晴",
          "多云",
          "阴",
          "小雨",
          "中雨",
          "大雨",
          "暴雨",
          "小雪",
          "中雪",
          "大雪",
          "暴雪",
          "冰雹",
          "雾",
          "霾",
        ];
        // 生成随机天气数据
        const weatherData = {
          temp: Math.floor(Math.random() * 15) + 15, // 生成15-29之间的随机温度
          city: "哈尔滨", // 固定城市为哈尔滨
          condition: conditions[Math.floor(Math.random() * conditions.length)], // 随机选择天气状况
        };

        // 更新天气显示
        document.getElementById("temp").textContent = `${weatherData.temp}°C`;
        document.getElementById("city").textContent = weatherData.city;
        document.getElementById("condition").textContent =
          weatherData.condition;
      }

      // 初始化并设置定时器
      updateClock(); // 立即执行一次更新时钟
      fetchWeather(); // 立即执行一次获取天气数据
      setInterval(updateClock, 1000); // 每秒更新一次时钟
      setInterval(fetchWeather, 30000); // 每30秒更新一次天气数据
    </script>
  </body>
</html>
